<template>
  <div class="try-out">
    <div class="banner">{{ title }}</div>
    <div class="notice">
      看完并答对全部视频后请记得做本章节测试哟，否则无法观看下一章节
    </div>
    <ol class="part-list-wrapper">
      <li
        v-for="(lesson, i) of lessons"
        :key="i"
        :class="{
          'can-try-out': lesson.canTry,
          'can-learn': lesson.canLearn,
        }"
        @click="learn(lesson)"
      >
        {{ i + 1 }}
      </li>
    </ol>
    <router-link to="mine" class="back-btn">返回个人中心</router-link>
  </div>
</template>

<script>
import { getUserInfo, getLessonList, getCourses } from '@/assets/js/api';
export default {
  computed: {
    hasBuyLesson() {
      return this.courses.includes(this.courseId) || this.courses.includes(9);
    }
  },
  data() {
    return {
      userId: localStorage.userId,
      isFirstChapter: this.$route.query.isFirstChapter,
      title: this.$route.query.chapterTitle,
      courseId: this.$route.query.courseId,
      lessons: [],
      courses: [],
      user: {}
    };
  },
  methods: {
    learn(lesson) {
      if (lesson.canLearn) {
        window.location.href = `https://www.qianduoduocaishang.com/web/api/course/${lesson.courseId}/learn?userId=${this.userId}&lessonId=${lesson.id}#lesson/${lesson.id}`;
      } else if (!this.hasBuyLesson) {
        this.$toast('您没有购买此课程');
      } else {
        this.$toast('您必须学完前面的课程才能学习本课程');
      }
    }
  },
  mounted() {
    getCourses(this.userId, false).then(data => {
      this.courses = data[1];
      getUserInfo(this.userId, false).then(data => {
        this.user = data;
        localStorage.userInfo = JSON.stringify(data);
        getLessonList(this.$route.query.chapterId).then(data => {
          this.lessons = data.map((lesson, i) => {
            let canTry = i <= 2 && !this.hasBuyLesson && this.isFirstChapter;
            return {
              ...lesson,
              canTry,
              canLearn: (canTry && i <= 2) || +lesson.number <= +this.user[`higherProgress${this.courseId - 1}`]
            };
          });
        });
      });
    });
  }
};
</script>

<style lang="less" scoped>
.try-out {
  min-height: 100vh;
  box-sizing: border-box;
  background: #fff;
  padding: 24px;
  .banner {
    height: 180px;
    background: url(../assets/images/banner3.png) no-repeat center center;
    background-size: contain;
    color: #fff;
    font-weight: 500;
    font-size: 32px;
    letter-spacing: 4px;
    box-sizing: border-box;
    padding: 32px 0 0 50px;
  }
  .notice {
    display: flex;
    min-height: 108px;
    background: url(../assets/images/bulb.png) no-repeat left center;
    background-size: 23px 29px;
    font-size: 24px;
    padding-left: 40px;
    align-items: center;
    color: #fe8170;
    line-height: 1.2;
  }
  .part-list-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding: 0 64px;
    > li {
      width: 112px;
      height: 54px;
      line-height: 54px;
      border-radius: 27px;
      text-align: center;
      background: #f2f2f2;
      color: #c1c1c1;
      font-size: 30px;
      margin-bottom: 32px;
      &:not(:nth-child(4n)) {
        margin-right: 42px;
      }
      &.can-try-out {
        position: relative;
        background: #e9ecfb;
        &:after {
          content: "试看";
          position: absolute;
          transform: scale(0.7);
          height: 32px;
          line-height: 32px;
          width: 80px;
          border-radius: 16px;
          border: 1px solid #c7452f;
          font-size: 20px;
          color: #c7452f;
          right: -40px;
          top: -15px;
          background: #fff;
        }
      }
      &.can-learn {
        color: #506af2;
      }
    }
  }
  .back-btn {
    display: block;
    text-align: center;
    font-size: 26px;
    color: #6585a8;
    padding: 30px;
  }
}
</style>
